<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>day10 搜索历史记录</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .box {
            margin: 0 auto;
            width: 600px;
        }
        
        .main {
            display: flex;
            flex-wrap: wrap;
        }
        
        .main #btn {
            border: 0;
            background-color: blueviolet;
            margin: 10px;
            padding: 10px 15px;
            position: relative;
            /* 超出部分隐藏 */
            width: 80px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            text-align: center;
        }
        
        .main #btn:hover {
            background-color: rgb(171, 99, 238);
        }
        
        .main #btn span {
            color: red;
            position: absolute;
            top: 0;
            right: 0;
            /* X 图标隐藏 */
            display: none;
            /* 鼠标滑过时 箭头变小手 */
            cursor: pointer;
        }
        
        #btn.re span {
            display: inline-block;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="header">
            名称：<input type="text" id="userName">
            <button type="button" id="add">搜索</button>
        </div>
        <div class="main">
            <!-- <div id="btn">123456<span onclick="del()">X</span></div> -->
        </div>
        <div class="footer">
            <button type="button" id="delAll">全部清除</button>
        </div>
    </div>

    <script>
        var userName = document.getElementById('userName');
        var add = document.getElementById('add');
        var delAll = document.getElementById('delAll');
        var main = document.querySelector('.main');

        var btn = document.getElementById('btn');

        var arr = [];

        //判断本地存储并渲染
        if (localStorage.arr) {
            var arr = JSON.parse(localStorage.arr);
            show(arr);
        } else {
            var arr = [];
        }

        //添加
        add.onclick = function() {
            if (userName.value == '') {
                alert('请补全信息 ( •̀ ω •́ )✧');
            } else {
                var obj = {
                    id: +new Date(),
                    userName: userName.value
                }
                arr.unshift(obj);
                userName.value = '';
                //本地存储
                localStorage.arr = JSON.stringify(arr);
                //渲染
                show(arr);
            }
        }

        //渲染
        function show(arr) {
            var str = '';
            for (var i = 0; i < arr.length; i++) {
                str += `
                    <div id="btn">${arr[i].userName}<span onclick="del(${arr[i].id})">X</span></div>
                `;
            }
            main.innerHTML = str;
        };

        //删除
        function del(Id) {
            for (var i = 0; i < arr.length; i++) {
                if (Id == arr[i].id) {
                    arr.splice(i, 1);
                }
                //本地存储
                localStorage.arr = JSON.stringify(arr);
                //渲染
                show(arr);
            }
        }

        //切换 X 删除图标
        main.onclick = function(event) {
            var e = event || window.event;
            // console.log('e:', e);
            var dom = e.target || e.srcElement;
            if (dom.tagName == 'DIV') {
                dom.ondblclick = function() {
                    this.classList.toggle('re')
                }
            }
        }

        //全部清除
        delAll.onclick = function() {
            if (confirm('确定要全部清除吗？ 😨')) {
                arr = [];
            }
            //本地存储
            localStorage.arr = JSON.stringify(arr);
            //渲染
            show(arr);
        }
    </script>
</body>

</html>